<template>
  <div class="zk-review-file-list">
    <div v-if="verticalLayout" class="vertical">
      <br />
      <vertical-item
        v-for="(fileItem,index) of fileList"
        :key="fileItem.url || fileItem.fileUrl"
        :file="fileItem"
        @onRemove="onRemove(index)"
        @onReview="onReview"
        @onDownload="onDownload"
      />
    </div>
    <div v-else class="horizontal">
      <horizontal-item
        v-for="(fileItem,index) of fileList.slice(0,showCount)"
        :key="fileItem.url || fileItem.fileUrl"
        :file="fileItem"
        @onRemove="onRemove(index)"
        @onReview="onReview"
        @onDownload="onDownload"
      />
      <div v-if="fileList.length > showCount">
        <el-popover
          placement="bottom"
          width="340"
          trigger="hover"
        >
          <vertical-item
            v-for="(fileItem,index) of fileList"
            :key="fileItem.url || fileItem.fileUrl"
            :file="fileItem"
            width="300"
            @onRemove="onRemove(index)"
            @onReview="onReview"
            @onDownload="onDownload"
          />
          <i slot="reference" class="el-icon-caret-bottom"></i>
        </el-popover>
      </div>
    </div>
    <el-dialog
      :visible.sync="reviewVisible"
      :close-on-click-modal="false"
      width="1024px"
      class="zk-file-review-dialog"
    >
      <zk-file-review
        v-if="reviewVisible"
        :type="reviewFile.type"
        :url="reviewFile.url"
      />
    </el-dialog>
  </div>
</template>
<script>
  import HorizontalItem from './components/horizontal-item'
  import VerticalItem from './components/vertical-item'
  import ZkFileReview from './components/zk-file-review/index'
  import { FILE_TYPE } from './common/constants'
  import { getFileOption } from './common/utils'

  export default {
    components: {
      HorizontalItem,
      VerticalItem,
      ZkFileReview,
    },
    model: {
      prop: 'fileList',
      event: 'onChange',
    },
    props: {
      fileList: {
        type: Array,
        default: () => [],
      },
      verticalLayout: {
        type: Boolean,
        default: false,
      },
      height: {
        type: String,
        default: 'auto',
      },
      showCount: {
        type: Number,
        default: 3,
      },
    },
    data() {
      return {
        list: this.fileList,
        reviewVisible: false,
        reviewFile: {
          url: '/',
          type: FILE_TYPE.OTHER,
        }
      }
    },
    watch: {
      fileList(newValue) {
        this.list = newValue
      },
      list(newValue) {
        this.$emit('onChange', newValue)
      },
    },
    methods: {
      onRemove(index) {
        this.list.splice(index, 1)
        this.$emit('onChange', this.list)
      },
      onReview(fileUrl, fileName) {
        // console.log(fileUrl, fileName)
        const { type } = getFileOption(fileName)
        this.reviewFile = { type, url: fileUrl }
        this.reviewVisible = true
        // console.log(this.reviewFile, this.reviewVisible)
      },
      onDownload(fileUrl) {
        // console.log('onDownload', fileUrl, fileName)
        if (fileUrl) {
          location.href = fileUrl
        }
      },
    }
  }
</script>
<style scoped lang="scss">
  .zk-review-file-list {
    display: flex;
    flex-wrap: nowrap;
    i.el-icon-caret-bottom {
      cursor: pointer;
      margin-left: 12px;
    }
    .horizontal {
      display: flex;
      flex-wrap: nowrap;
    }
    .vertical {
      width: 100%;
    }
  }
</style>
